<template>
  <div class="main">
    <div class="operate">
      <el-input
        class="inputCss"
        v-model="searchTitle"
        placeholder="请输入搜索的标题"
        clearable
      ></el-input>
      <el-button
        icon="el-icon-search"
        type="primary"
        plain
        @click="getSearchList"
        >&nbsp;查询</el-button
      >
      <el-button
        icon="el-icon-refresh"
        type="primary"
        plain
        class="right"
        @click="refresh"
        >&nbsp;刷新</el-button
      >
      <el-button
        icon="el-icon-delete"
        type="primary"
        class="right"
        plain
        @click="clickDelete"
        >&nbsp;删除</el-button
      >
      <el-button
        icon="el-icon-document-add"
        type="primary"
        class="right"
        plain
        @click="addData"
        >&nbsp;新增</el-button
      >
      <el-button
        icon="el-icon-edit"
        type="primary"
        class="right"
        plain
        @click="editData"
        >&nbsp;编辑</el-button
      >
    </div>
    <div class="table">
      <vxe-table
        show-overflow
        align="center"
        :data="tableDatas"
        border
        highlight-current-row
        @current-change="handleCurrentRow"
        :height="heightY"
      >
        <vxe-column title="序号" type="seq" width="60" />
        <vxe-column title="标题">
          <template slot-scope="scope">
            <span style="color: #409eff" @click="titleClick(scope.row)">{{
              scope.row.applyName
            }}</span>
          </template>
        </vxe-column>
        <vxe-column field="applyOrgName" title="申请部门" width="400" />
        <vxe-column title="申请人" width="250">
          <template slot-scope="scope">
            {{
              scope.row.applyFirstPersonName +
              "、" +
              scope.row.applySecondPersonName
            }}
          </template>
        </vxe-column>
        <vxe-column field="startDate" title="开始日期" width="200" />
        <vxe-column field="endDate" title="截止日期" width="200" />
        <vxe-column title="审核状态" width="200">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditState == 0">待提交</el-tag>
            <el-tag type="warning" v-if="scope.row.auditState == 1"
              >待审核</el-tag
            >
            <el-tag type="success" v-else-if="scope.row.auditState == 2"
              >审核通过</el-tag
            >
            <el-tag
              type="danger"
              @click="auditTurnDown(scope.row)"
              v-else-if="scope.row.auditState == 3"
              >审核驳回</el-tag
            >
            <el-tag type="danger" v-else-if="scope.row.auditState == 4"
              >强制终止</el-tag
            >
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        background
        align="right"
        :current-page.sync="pages.currentPage"
        :page-size.sync="pages.pageSize"
        :total="pages.totalResult"
        size="small"
        :page-sizes="[20, 50, 100, 500, 1000]"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total',
        ]"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </div>
    <searchApplyPop
      v-if="searchApplyPopFlag"
      ref="searchApplyPopRefs"
      @initData="getSearchList"
    ></searchApplyPop>
    <documentTitle
      v-if="documentTitleFlag"
      ref="documentTitleRefs"
    ></documentTitle>
    <auditTurnDownPop
      v-if="auditTurnDownPopFlag"
      ref="auditTurnDownPopRefs"
    ></auditTurnDownPop>
    <editSearchApply
      v-if="editSearchApplyFlag"
      ref="editSearchApplyRefs"
      @initData="getSearchList"
    ></editSearchApply>
  </div>
</template>
  
  <script>
import store from "@/store";
import {
  searchGetList,
  searchDelete,
  archiveViewApplyTime,
} from "@/api/datacentersg/achives/documentApi";
import searchApplyPop from "./searchApplyPop.vue";
import documentTitle from "./documentTitle.vue";
import auditTurnDownPop from "./auditTurnDownPop.vue";
import editSearchApply from "./editSearchApply";

export default {
  components: {
    searchApplyPop,
    documentTitle,
    auditTurnDownPop,
    editSearchApply,
  },
  data() {
    return {
      heightY: window.innerHeight - 250 + "px",
      tableDatas: [],
      searchTitle: "",
      searchApplyPopFlag: false,
      documentTitleFlag: false,
      auditTurnDownPopFlag: false,
      currentRow: null,
      pages: {
        currentPage: 1,
        pageSize: 20,
        totalResult: 0,
      },
      editSearchApplyFlag: false,
      componentsTime: "",
    };
  },
  created() {
    this.getSearchList();
  },
  methods: {
    getSearchList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyName: this.searchTitle,
          pageSize: this.pages.pageSize,
          currentPage: this.pages.currentPage,
        },
      };

      searchGetList(params).then((result) => {
        if (result.result) {
          this.tableDatas = result.resultdata.data;
          this.pages.totalResult = result.resultdata.count;
        }
      });
    },
    handleCurrentRow(currentRow) {
      this.currentRow = currentRow.row;
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pages.currentPage = currentPage;
      this.pages.pageSize = pageSize;
      this.getSearchList();
    },
    // 刷新
    refresh() {
      this.getSearchList();
    },
    // 删除
    clickDelete() {
      if (this.currentRow.auditState == 0) {
        if (this.currentRow !== null) {
          this.$confirm("确定删除当前行?", "操作提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            const params = {
              userId: store.getters.user_id.toString(),
              token: store.getters.token.toString(),
              data: {
                applyId: this.currentRow.applyId,
              },
            };
            searchDelete(params).then((result) => {
              if (result.result) {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.getSearchList();
              }
            });
          });
        } else {
          this.$message({
            type: "warning",
            message: "请选择一条记录",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "当前状态不能删除",
        });
      }
    },
    // 编辑
    editData() {
      if (this.currentRow !== null) {
        if (this.currentRow.auditState === 0) {
          this.editSearchApplyFlag = true;
          this.$nextTick(() => {
            this.$refs.editSearchApplyRefs.init(this.currentRow);
          });
        } else {
          this.$message({
            type: "warning",
            message: "无编辑权限",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请选择一条记录",
        });
      }
    },
    // 新增
    addData() {
      this.searchApplyPopFlag = true;
      this.$nextTick(() => {
        this.$refs.searchApplyPopRefs.init();
      });
    },
    // 标题点击
    titleClick(row) {
      if (row.auditState !== 2) {
        this.$message({
          message: "该状态下无法查看！",
          type: "warning",
        });
        return;
      }
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyId: row.applyId,
        },
      };
      archiveViewApplyTime(params)
        .then((result) => {
          this.componentsTime = result.resultdata.data;

          if (this.componentsTime === "00:00:00") {
            this.$message({
              message: "已过授权时间期限，无法查看",
              type: "warning",
            });
          } else {
            this.documentTitleFlag = true;
            this.$nextTick(() => {
              this.$refs.documentTitleRefs.init(row);
            });
          }
        })
        .catch((error) => {
          console.error("请求出错：", error);
          // 处理请求出错的情况
        });
    },
    //审核驳回
    auditTurnDown(item) {
      this.auditTurnDownPopFlag = true;
      this.$nextTick(() => {
        this.$refs.auditTurnDownPopRefs.init(item);
      });
    },
  },
};
</script>
  <style scoped>
.main {
  width: 100%;
  height: calc(100% - 50px);
  background-color: #ffffff;
}
.operate {
  height: 70px;
  padding: 10px;
  /* display: flex; */
  align-items: center;
  justify-content: flex-end;
}
.table {
  height: 85vh;
  overflow-y: scroll;
}
.inputCss {
  float: left;
  margin-right: 10px;
  width: 300px;
}
.selectCss {
  float: left;
  margin-right: 10px;
}
.right {
  float: right;
}
</style>
  